import { Commit } from "vuex/types";
import Storage from "@/utils/Storage";
import { State } from "./interface";
export * from "./interface";
import dayjs from "dayjs";
const ASIDE_COLLAPSE = "aside-collapse";
import { get, isObject } from "lodash";

export const ASIDE_COLLAPSE_TRUE = "ASIDE_COLLAPSE_TRUE"; // 塌方
export const ASIDE_COLLAPSE_FALSE = "ASIDE_COLLAPSE_FALSE"; // 非塌方
export const CHANGE_THEME = "CHANGE_THEME"; // 换肤
export const INIT_APP = "INIT_APP"; // 初始化APP相关配置

const ENUM = "enum";
const ENUM_SOURCE = "enum_source";

const getEnumMap = () => {
  const _enum: any = {};
  return function fn(currentMap: any, parentKey = "") {
    if (currentMap._data) {
      _enum[parentKey] = {
        ...currentMap._data
      };
    } else {
      isObject(currentMap) && Object.keys(currentMap).forEach((key: string) => {
        const nextMap = currentMap[key];
        const _key = parentKey ? `${parentKey}_${key}` : key;
        fn(nextMap, _key);
      });
    }
    return _enum;
  };
};

const state = (): State => ({
  theme: Storage.get("app_theme") || process.env.VUE_COMPONENT_THEME,
  enum: Storage.get(ENUM) || {},
  componentsSize: "mini",
  themes: [
    {
      name: "默认",
      code: "default"
    },
    {
      name: "赤",
      code: "red"
    },
    {
      name: "橙",
      code: "orange"
    },
    // {
    //   name: '黄',
    //   code: 'yellow',
    // },
    {
      name: "绿",
      code: "green"
    },
    {
      name: "青",
      code: "cyan"
    },
    {
      name: "蓝",
      code: "blue"
    },
    {
      name: "紫",
      code: "violet"
    }
  ],
  version: process.env.VUE_APP_VS as string,
  asideCollapse: Storage.get(ASIDE_COLLAPSE) || false // 左侧是否为 “塌方” 状态
});

const mutations = {
  /**
   * Asides collapse true
   * @param s
   */
  [ASIDE_COLLAPSE_TRUE](s: State) {
    s.asideCollapse = true;
    Storage.set(ASIDE_COLLAPSE, true);
  },

  /**
   * Asides collapse false
   * @param s
   */
  [ASIDE_COLLAPSE_FALSE](s: State) {
    s.asideCollapse = false;
    Storage.set(ASIDE_COLLAPSE, false);
  },
  [CHANGE_THEME](s: State, themeCode: string) {
    s.theme = themeCode;
    Storage.set("app_theme", themeCode);
  },

  [INIT_APP](s: State, payload: any) {
    Storage.set(ENUM_SOURCE, payload); // 本地存储 原始数据
    s.enum = getEnumMap()(get(payload, "enum_list", {}));
    Storage.set(ENUM, s.enum); // 本地存储 格式化后的数据
  }
};

const actions = {
  /**
   * Toggles aside status
   * @param context
   */
  toggleAsideStatus(context: { commit: Commit; state: State }) {
    context.state.asideCollapse
      ? context.commit(ASIDE_COLLAPSE_FALSE)
      : context.commit(ASIDE_COLLAPSE_TRUE);
  },
  /**
   * install websocket
   */
  installWebsocket(context: { rootState: any }) { },
  /**
   * 换肤
   */
  changeTheme(context: { commit: Commit; state: State }, payload: { code: string }) {
    context.commit(CHANGE_THEME, payload.code);
  },
  getOnlyCode(context: { commit: Commit; state: State, rootState: any }) {
    return `${context.rootState.user.account}_${dayjs().valueOf()}`;
  },
  /**
   * 初始化APP
   */
  async initApp(context: { commit: Commit }) {
    // const localEnum = Storage.get(ENUM) || {};
    // const version = localEnum.version || 0;
    // const config = await getPublicInitializeGlobal({
    //   user_version: version,
    // });
    // config && context.commit(INIT_APP, config);
  }
};

export default {
  namespaced: true,
  mutations,
  state,
  actions
};
